<template>
  <div class="am-u-sm-12 am-u-md-12 am-u-lg-12" >
    <div class="widget am-cf">
      <div class="widget-head am-cf">
        <div class="widget-title am-fl">期数信息</div>
        <div class="widget-function am-fr">
          <button type="button" class="am-btn am-btn-default" @click="$router.go(-1)">返回</button>
        </div>
      </div>
      <div class="widget-body am-fr">
        <form class="am-form tpl-form-border-form tpl-form-border-br" data-am-validator :id="id">
          <fieldset>

            <div class="am-form-group">
              <label class="am-u-sm-2 am-form-label">
                <span class="am-text-danger am-margin-right-xs am-text-xs">*</span>所在区域
              </label>
              <div class="am-u-sm-3 am-u-end input-field">
                <select2 :disabled="!editable" required v-model="formData.areaTeamId" :options="areaTeams" >
                  <option value="">请选择</option>
                </select2>

              </div>
            </div>

            <div class="am-form-group am-form-select">
              <label class="am-u-sm-2 am-form-label">
                <span class="am-text-danger am-margin-right-xs am-text-xs">*</span>期名
              </label>
              <div class="am-u-sm-3 input-field am-u-end">
                <input type="text" class="am-form-field"  placeholder="请输期名" required v-model="formData.periodName">
              </div>
            </div>
            <div class="am-form-group am-form-select">
              <label class="am-u-sm-2 am-form-label">
                <span class="am-text-danger am-margin-right-xs am-text-xs">*</span>段数
              </label>
              <div class="am-u-sm-3 input-field am-u-end">
                <input  type="number" class="am-form-field" min="1" step="1" placeholder="" required v-model="formData.segments">
              </div>
            </div>

            <div class="am-form-group" v-for="(item,index) in segmentList">
              <label class="am-u-sm-2 am-form-label">
                <span class="am-text-danger am-margin-right-xs am-text-xs">*</span>段次{{index + 1}}
              </label>
              <div class="am-u-sm-3 input-field">
                <date-picker v-model="item.startDate" >
                  <input  type="text" class="am-form-field" placeholder="开始日期" data-am-datepicker readonly  required >
                </date-picker>
              </div>
              <div class="am-u-sm-1 input-field am-text-center">
                ~
              </div>
              <div class="am-u-sm-3 am-u-end input-field">
                <date-picker v-model="item.endDate" >
                  <input type="text" class="am-form-field" placeholder="结束日期" data-am-datepicker readonly  required >
                </date-picker>
              </div>
              <label class="am-u-sm-2 am-form-label">
                <span class="am-text-danger am-margin-right-xs am-text-xs">*</span>有效讲次
              </label>
              <div class="am-u-sm-1 am-u-end input-field">
                  <input v-model="item.effectiveLectureNum" type="number" class="am-form-field" placeholder="有效讲次"   required >
              </div>
            </div>

            <div class="am-form-group">
              <label class="am-u-sm-2 am-form-label">
                <span class=" am-margin-right-xs am-text-xs"></span>顺期来源
              </label>
              <div class="am-u-sm-10 input-field">
                <choose v-model="formData.sequentialPeriodIds">
                  <select data-placeholder="选择顺期来源" style="min-width:300px;" multiple class="chosen-select-no-results">
                    <option value=""></option>
                    <option v-for="item in beforePeriods" :value="item.periodId">{{item.periodName}}</option>
                  </select>
                </choose>
              </div>
            </div>

            <div class="am-form-group">
              <label class="am-u-sm-2 am-form-label">
                <span class=" am-margin-right-xs am-text-xs"></span>跨期来源
              </label>
              <div class="am-u-sm-10 input-field">
                <choose v-model="formData.stepPeriodIds">
                  <select data-placeholder="选择跨期来源" style="min-width:300px;" multiple class="chosen-select-no-results">
                    <option value=""></option>
                    <option v-for="item in beforePeriods" :value="item.periodId">{{item.periodName}}</option>
                  </select>
                </choose>
              </div>
            </div>

            <div class="am-form-group">
              <label class="am-u-sm-2 am-form-label">
                <span class="am-text-danger am-margin-right-xs am-text-xs"></span>同期期数
              </label>
              <div class="am-u-sm-3 am-u-end input-field">
                <select2 v-model="formData.withPeriodId" :options="periods">
                  <option value="">请选择期数</option>
                </select2>

              </div>
            </div>

            <div class="am-form-group">
              <div class="am-u-sm-9 am-u-sm-push-3">

                <button type="submit" class="am-btn am-btn-primary">提交</button>
              </div>
            </div>
            </fieldset>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import io from '../../lib/io'
import util from '../../lib/util'
    export default{
        data(){
            return{
              formData:{
                segments: 1,
                sequentialPeriodIds:'',
                areaTeamId:'',
                stepPeriodIds:'',
                withPeriodId:''
              },
              segmentList:[{startDate:"",endDate:'',effectiveLectureNum:6}],
              editable:true,
              periodId : '',
              beforePeriods:[],
            }
        },
        watch:{
          'formData.areaTeamId':function (val) {
              var _this = this
            if (this.formData.areaTeamId==null){
                  return;
            }
            io.post(io.apiAdminBeforePeriods,{ periodId : this.periodId,areaTeamId: this.formData.areaTeamId },
              function(ret){
                if(ret.success){
                  _this.beforePeriods=ret.data
                }
              },
              function(){
                _this.$alert('请求服务器失败')
              })
          },
          'formData.segments':function(val){
            var sl = [] ;
            for(var i = 0 ; i < val ; i++ ){
                sl.push({
                  startDate : this.formData && this.formData.segmentList && this.formData.segmentList[i] && this.formData.segmentList[i].startDate || '',
                  endDate : this.formData && this.formData.segmentList && this.formData.segmentList[i] && this.formData.segmentList[i].endDate || '',
                  effectiveLectureNum:this.formData && this.formData.segmentList && this.formData.segmentList[i] && this.formData.segmentList[i].effectiveLectureNum || 6,
                })
            }
            this.segmentList = sl
          }
        },
        computed:{
          areaTeams : function(){
            var options =  ( this.$root.config.areaTeams || [] )
              .map(function(item){
                return {value:item.areaTeamId,text:item.name}
              })
            return options
          },
          periods() {
            let arr = []
            this.beforePeriods.map(val => {
              arr.push({
                text: val.periodName,
                value: val.periodId
              })
            })
            return arr
          },
        },
        created:function(){
          var _this = this
           this.periodId = this.$params('periodId')
         if(this.periodId){
          io.post(io.apiAdminPeriodDetail,{ periodId : this.periodId },
            function(ret){
              if(ret.success){
                ret.data.sequentialPeriodIds = ret.data.sequentialPeriodIds ? ret.data.sequentialPeriodIds.split(','):[]
                ret.data.stepPeriodIds = ret.data.stepPeriodIds ? ret.data.stepPeriodIds.split(','):[]
                _this.formData = ret.data
                for(var i = 0 ; i < ret.data.segmentList.length ;i++ ){
                  ret.data.segmentList[i].startDate = util.formatDate(ret.data.segmentList[i].startDate)
                  ret.data.segmentList[i].endDate = util.formatDate(ret.data.segmentList[i].endDate)
                }
                ret.data.segmentList
              }
            },
            function(){
              _this.$alert('请求服务器失败')
          })
         }

         this.editable = !this.periodId


        },
        mounted:function(){
          var _this = this ;
          $('#' + this.id ).validator({
            onValid: function(validity) {
              $(validity.field).closest('.input-field').find('.am-alert').hide();
            },
            onInValid: function(validity) {
              var $field = $(validity.field);
              var $group = $field.closest('.input-field');
              var $alert = $group.find('.am-alert');
              // 使用自定义的提示信息 或 插件内置的提示信息
              var msg = $field.data('validationMessage') || this.getValidationMessage(validity);

              if (!$alert.length) {
                $alert = $('<div class="am-alert am-alert-danger"></div>').hide().
                appendTo($group);
              }

              $alert.html(msg).show();
            },
            submit:function(e){
              e.preventDefault();
              var $submitBtn = $('button[type=submit]',e.target);
              $submitBtn.attr("disabled" ,"disabled" )
              _this.$showLoading()
              var formValidity = this.isFormValid();
              var complete = function(){
                _this.$hiddenLoading()
                _this.$root.$emit('reloadConfig')
                $submitBtn.removeAttr("disabled" ,"disabled" )
              }
              if(formValidity){
                _this.save(complete);
              }else{
                complete.call()
              }
            }
          });
        },

        methods:{
          save:function(complete){
            var _this = this
            _this.formData.sequentialPeriodIds = _this.formData.sequentialPeriodIds && _this.formData.sequentialPeriodIds.length > 0 ?
              _this.formData.sequentialPeriodIds.join(',') : ''
            _this.formData.stepPeriodIds = _this.formData.stepPeriodIds && _this.formData.stepPeriodIds.length > 0 ?
              _this.formData.stepPeriodIds.join(',') : ''
            _this.formData.segmentList = JSON.stringify(this.segmentList) 
            io.post(io.apiAdminSaveOrUpdatePeriod,_this.formData,
            function(ret){
              complete.call()
              if(ret.success){
                _this.$toast('OK')
                _this.$router.push('/main/sys/period/list')
              }else{
                _this.$alert(ret.desc)
                _this.formData.sequentialPeriodIds = _this.formData.sequentialPeriodIds ? _this.formData.sequentialPeriodIds.split(','):[]
                _this.formData.stepPeriodIds = _this.formData.stepPeriodIds ? _this.formData.stepPeriodIds.split(','):[]
              }

            },
            function(){
              complete.call()
              _this.$alert('请求服务器失败')
            })
          }
        }
    }
</script>
